<template>
	<view>
	<view class="cover">
		<image :src="artical.cover" mode=""></image>
	</view>
	<view class="title">
		<view class="userIcon">
			<u-image :src="artical.icon" height="100rpx" shape="circle"></u-image>
			<text class="author">{{artical.author}}</text>
		</view>
		<view class="content">
			{{artical.title}}
		</view>
	</view>
	<view class="mainContent">
		<u-parse :html='artical.content'></u-parse>
	</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				artical:''
			}
		},
		onLoad(param) {
			
			uni.request({
				url:'http://192.168.0.102:3000/artical',
				method:'GET',
				data:{
					id:param.id
				},
				success: (res) => {
					this.artical=res.data
				}
			})
		}
	}
</script>

<style scoped lang="less"> 
@borderColor:#E7EAED;
.cover{
	
image{
	width: 100%;
	
}
}
.title{
	position: relative;
	height: 300rpx;
	border-top: 1px solid white;
	border-bottom: 20rpx solid @borderColor;
	.userIcon{
		position: absolute;
		top: -50rpx;
		right: 50%;
		
		transform: translateX(50%);
		.author{
			color: #C0C0C0;
		}
	}
	
	.content{
		height: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 40rpx;
		padding: 50rpx;
		margin-top: 50rpx;
	}
}
.mainContent{
	line-height: 2em;
}
</style>
